<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<base href="<%=basePath%>">
<!-- Bootstrap core CSS -->
<link href="<%=path%>/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="<%=path%>/css/bootstrap-table.css">


<!-- Custom styles for this template -->

<script src="<%=path%>/js/jquery.min.js"></script>
<script src="<%=path%>/js/bootstrap.min.js"></script>
<script src="<%=path%>/js/bootstrap-table.js"></script>


<!-- sigma-->
<script src="<%=path%>/js/sigma.min.js"></script>
<script src="<%=path%>/js/jquery-scrolltofixed-min.js"></script>
<script src="<%=path%>/js/highlight.pack.js"></script>
<script src="<%=path%>/js/sigma.plugins.animate.min.js"></script>
<script src="<%=path%>/js/sigma.parsers.json.min.js"></script>
<script src="<%=path%>/js/sigma.plugins.neighborhoods.min.js"></script>
<script src="<%=path%>/js/sigma.plugins.dragNodes.min.js"></script>
<script src="<%=path%>/js/sigma.layout.forceAtlas2.min.js"></script>
<style>
#sigma-container2 {
	max-width: 700px;
	height: 500px;
	margin: auto;
}

body {
	font-size: 62.5%;
}

label, input {
	display: block;
}

input.text {
	margin-bottom: 12px;
	width: 95%;
	padding: .4em;
}

fieldset {
	padding: 0;
	border: 0;
	margin-top: 25px;
}

h1 {
	font-size: 1.2em;
	margin: .6em 0;
}

div#users-contain {
	width: 350px;
	margin: 20px 0;
}

div#users-contain table {
	margin: 1em 0;
	border-collapse: collapse;
	width: 100%;
}

div#users-contain table td, div#users-contain table th {
	border: 1px solid #eee;
	padding: .6em 10px;
	text-align: left;
}

.ui-dialog .ui-state-error {
	padding: .3em;
}

.validateTips {
	border: 1px solid transparent;
	padding: 0.3em;
}
</style>
</head>
<body>
	<!-- Begin Content -->
	
	<div class="panel panel-default">

		<div class="panel-body">
			<div class="row">
				<div class="col-lg-2 col-md-2 col-sm-2">
					<h4>数据集</h4>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3">
					<select data-toggle="dropdown" id="datasets" 
					class="form-control select select-success">
						<option value="none">设置数据集</option>
					</select>
				</div>
			</div>
		</div>
		<div class="panel-body">
			<div class="row">
				<div class="col-sm-5">
					<input id="step" type="text" class="form-control"
						placeholder="Step" aria-describedby="basic-addon1">
				</div>
				<div class="col-sm-5">
					<input id="topkhit" type="text" class="form-control "
						placeholder="Top K" aria-describedby="basic-addon1">
				</div>
				<div class="col-sm-2">
					<button type="button" class="btn btn-primary"
						onclick="giveParamHit();">确定</button>
				</div>
			</div>
		</div>
	</div>

	<div class="panel panel-default">
		<div class="panel-body ">
			<div id="sigma-container2"></div>
		</div>
	</div>
	<div class="panel panel-default panel-info" id="show_hit"
		style="display: none;font-size: 16px;">
		<div class='panel-heading'>预测结果:</div>
		<div class="panel-body">
			<table id="tt_hit">
			</table>

		</div>
		<!-- End Content -->
	</div>
	<script type="text/javascript">
		$.ajax({
			type : "post",//请求方式
			url : "servlet/fileslistservlet",//发送请求地址
			dataType : "json",
			//请求成功后的回调函数有两个参数
			success : function(data) {
				var datats=eval(data);
				datats.forEach(function(mydata) {
					$("#datasets").append("<option value='"+mydata+"'>"+mydata+"</option>"); 
				});
			}
		});
		
		$("#datasets").change(function(data){
			if($(this).val()=="none"){
				$("#ajaxdataset").val("");
			}else{
				initSigma("<%=path%>/duansky/data/"+$(this).val(),2);
				$("#ajaxdataset").val($(this).val());
			}
			
	 	 });
		
		function changeHit(){
			$('#tt_hit').bootstrapTable({
		    	method: 'get',
		        url: 'libohan/data/table.json',
		        height: $(window).height() - 200,
		        striped: true,	
		        columns: [{
		            field: 'source',
		            title:'Source'
		        }, {
		            field: 'target',
		            title: 'Target',
		        }, {
		            field: 'value',
		            title: 'Score',
		        }]
			});
			$('#tt_hit').bootstrapTable("refresh",{
				url: 'libohan/data/table.json'
			});
			var ui = document.getElementById("show_hit");
			ui.style.display="block";
		}
		
		function checkRateHit(input)
		{
		     var re = /^[0-9]+.?[0-9]*$/;   //判断字符串是否为数字     //判断正整数 /^[1-9]+[0-9]*]*$/  
		   	 //var nubmer = document.getElementById(input).value;
		     if (!re.test(input))
		    {
		       	return false;
		    }
		    return true;
		}

		var fileName ="<%=path%>/duansky/data/data.json";
		var mysigma_hit;
		var dataset;
		initSigma(fileName,1);
		function initSigma(fileName,state){
			if(typeof(mysigma_hit) != "undefined"){
				mysigma_hit.kill();
			}
			sigma.parsers.json(fileName, {
				//container : 'sigma-container'
			}, function(s) {
				mysigma_hit = s;
				mysigma_hit.settings({
					edgeColor : 'default',
					defaultEdgeColor : '#ccc',
				// defaultEdgeType : 'arrow'
				});
				mysigma_hit.graph.nodes().forEach(function(n) {
					 n.color = [ '#f8aba6', '#f47a55', '#fab27b', '#ffce7b',
									'#45b97c', '#65c294', '#585eaa', '#9b95c9' ][Math
									.round(Math.random() * 8)];
				});
				mysigma_hit.graph.edges().forEach(function(e) {
					e.type = "arrow";
					//e.originalColor = e.color;
					//e.color = e.originalColor;
					//e.size=2;
				});
				if(state=1){
					mysigma_hit.addCamera('cam');
					mysigma_hit.addRenderer({
					  container: document.getElementById('sigma-container2'),
					  type: 'canvas',
					  camera: 'cam'
				});
				sigma.renderers.def = sigma.renderers.canvas;
				var dragListener = sigma.plugins.dragNodes(mysigma_hit, mysigma_hit.renderers[0]);
				}
				mysigma_hit.refresh();	
			});
		}
		
		function giveParamHit()
		{		
			if($("#ajaxdataset").val()=="") {
				alert("必须选择数据集！");
				return;
				}
				if(!checkRateHit(document.getElementById("step").value) || !checkRateHit(document.getElementById("topkhit").value))
				{
						alert("参数无效！");
						return;
				}
				if (document.getElementById("step").value <= 0 ){
						alert("参数无效！");
						return;		
				}
				if (document.getElementById("topkhit").value <= 0 ){
						alert("参数无效！");
						return;		
				}
				var params={
				"func_type":"givepara",
				"alg_type":"hit",
		        "step":document.getElementById("step").value,
		        "topkhit":document.getElementById("topkhit").value,
		        "dataset":$("#ajaxdataset").val()
		   		 };
				console.log(dataset);
				$.ajax({
				type:"post",//请求方式
			    url:"servlet/boHansevlet",//发送请求地址
			    dataType:"text",
			    data: params,
				//请求成功后的回调函数有两个参数
				success:function(data){
					
					console.log(data);
					//var cascadeinfojson=eval(data); //解析json对象 
					$("#sigma-container2").empty();
					mysigma_hit.graph.nodes().length = 0;
		    		mysigma_hit.graph.edges().length = 0;
		    		delete mysigma_hit.graph.nodes();
		    		delete mysigma_hit.graph.edges();
			
					changeHit();
					sigma.parsers.json(
		            '<%=path%>/libohan/data/data_rand.json',
							{
								container : 'sigma-container2'
							}, function(s) {
								mysigma_hit = s;

								mysigma_hit.settings({
									edgeColor : 'default',
									defaultEdgeColor : '#ccc',
								});

								mysigma_hit.graph.nodes().forEach(function(n) {
									if (n.color != '#ff0000')
										n.color = '#bbf';
								});

								mysigma_hit.graph.nodes().forEach(
										function(n) {
											n.color = [ '#f8aba6', '#f47a55',
													'#fab27b', '#ffce7b',
													'#45b97c', '#65c294',
													'#585eaa', '#9b95c9' ][Math
													.round(Math.random() * 8)];
										});

								mysigma_hit.graph.edges().forEach(function(e) {
									e.type = 'arrow';
								});

								mysigma_hit.refresh();

							});
				}
			});
		}
	</script>
	<div id="ajaxdataset" style="display: none;"></div>
</body>
</html>